  <template>
	  <div class="box" >
			 <img :src="`${$VUE_APP_IMG_URL}/pintubg.png`" alt="" class="pintubg" />
			<ul class="puzzle-wrap">
				<li 
				
					:class="{'puzzle': true, 'puzzle-empty': !puzzle}" 
					v-for="(puzzle,i) in puzzles" :key="i" 
					:style="{
						width:blockWidth+'rpx',
						height:blockWidth+'rpx',
										backgroundPosition:getImgxy(puzzle),
										backgroundImage: 'url(' + img + ')',
										backgroundSize:pxy.x+' '+pxy.y,
									}"
						@click="moveFn(i)"
				></li>
			</ul>
				 <view class="startbtn" @click="render()"><text class="text">开始游戏</text></view>
		</div>
	
</template>

<script>

export default {
	name: "pintugame",
	components: {
	},
    data () {
        return {
            aid:0,
            info:{},
            img:"https://image.dayouqiantu.cn/5ca081af6183f.jpg",
            // img:'http://hmk.yzcm0471.com/prod-api/file/pic/20221208144631863974.png',
            pxy:{x:0,y:0},
            row:4,
            width:700,
            blockWidth:100,
            puzzles5: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25],
            puzzles4: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16],
            puzzles3: [1,2,3,4,5,6,7,8,9],
            puzzles:[]
        }
    },
	mounted(){
		this.getimg(this.img)
    this.getpuzzles(this.row)
	},

    methods: {
		getimg(img){
			let that = this
			uni.getImageInfo({
			     src:img,
			     success: function (res) {
				        that.pxy.x  = that.pxTorpx(res.width/that.row*2)+'rpx'
					    that.pxy.y  = that.pxTorpx(res.height/that.row*2)+'rpx'
						 console.log(that.pxy.x)
				   }
			})
		},
		
		pxTorpx(px) {
			  let deviceWidth = wx.getSystemInfoSync().windowWidth; //获取设备屏幕宽度
			  let rpx = (750 / deviceWidth) * Number(px)
			  return rpx;
		},

		getpuzzles(row){
			 this.blockWidth =  this.width / row;
			if(row==3){
				this.puzzles = this.puzzles3
			}else if(row==4){
				this.puzzles = this.puzzles4
			}else{
				this.puzzles = this.puzzles5
			}
		},

        // 重置渲染
        render () {
			
            let puzzleArr = [],
                i = 1
            // 生成包含1 ~ 15数字的数组
            for (i; i < this.row*this.row; i++) {
                puzzleArr.push(i)
            }

            // 随机打乱数组
            puzzleArr = puzzleArr.sort(() => {
                return Math.random() - 0.5
            });

            // 页面显示
            this.puzzles = puzzleArr
            this.puzzles.push('')
			
        },
   
        // 点击方块
        moveFn (index) {
            var temp =  Object.assign([],this.puzzles);
            // 获取点击位置及其上下左右的值
            let curNum = this.puzzles[index],
                leftNum = this.puzzles[index - 1],
                rightNum = this.puzzles[index + 1],
                topNum = this.puzzles[index - this.row],
                bottomNum = this.puzzles[index + this.row]
				

				// 和为空的位置交换数值
				if (leftNum === '' && index % this.row) {
					  temp[index - 1] = curNum
					  temp[index] = ''
					
				} else if (rightNum === '' && (this.row-1) !== index % this.row) {
					temp[index + 1] = curNum
					temp[index] = ''
					
				} else if (topNum === '') {
					temp[index -this.row] = curNum
					temp[index] = ''
		   
				} else if (bottomNum === '') {
					temp[index + this.row] = curNum
					temp[index] = ''
				}
			    this.puzzles =  temp 

            this.passFn()
        },

        // 校验是否过关
        passFn () {
			let length = this.row*this.row-1
            if (this.puzzles[length] === '') {
                const newPuzzles = this.puzzles.slice(0, length)

                const isPass = newPuzzles.every((e, i) => e === i + 1)

                if (isPass) {
                    console ('恭喜，闯关成功！')
                  uni.showToast({
                    title: '恭喜，闯关成功！',
                    icon: 'success',
                    duration: 2000
                  });

                }
            }
        },
		getImgxy(i){
			i = i-1
			let  blockWidth = this.blockWidth
			let pxy = {	x:0,y:0}
			if(i<this.row){
				pxy.x = blockWidth * i
				pxy.y = 0
			}else if(this.row<=i&&i<this.row*2){
				let j = i-this.row
				pxy.x = blockWidth * j
				pxy.y = blockWidth 
			}else if(this.row*2<=i&&i<this.row*3){
				let j = i-this.row*2
				pxy.x = blockWidth * j
				pxy.y = blockWidth *2
			}else if(this.row*3<=i&&i<this.row*4){
				let j = i-this.row*3
				pxy.x = blockWidth * j
				pxy.y = blockWidth *3
			}
			else if(this.row*4<=i&&i<this.row*5){
				let j = i-this.row*4
				pxy.x = blockWidth * j
				pxy.y = blockWidth *4
			}
			return "-"+(pxy.x)+"rpx "+ "-"+(pxy.y)+"rpx"
		}
    },

}
</script>

<style>
/* @import url('./assets/css/bootstrap.min.css'); */

body {
    font-family: Arial, "Microsoft YaHei"; 
}

.box {
	position: relative;
    margin:0 auto;
	overflow: hidden;
}

.puzzle-wrap {
	position: relative;
    width: 800rpx;
    height: 800rpx;
    padding: 0;
    list-style: none;
	margin-left: 26rpx;
    margin-top: 300rpx;
}

.puzzle {
    float: left;
    width: 200rpx;
    height: 200rpx;
    font-size: 20px;

}

.puzzle-empty {
    background: #fff !important;
    box-shadow: inset 2px 2px 18px;
}

.btn-reset {
    box-shadow: inset 2px 2px 18px;
}

.pintubg{position: fixed;width: 100%;height: 100vh;top: 0;left: 0;z-index: -1;}

.startbtn{position: relative;display:block;margin:40rpx auto;width: 100%;text-align: center; }
.startbtn .text{background: #40B193;color:#fff;padding: 18rpx 60rpx;border-radius: 20rpx;}
</style>